<!--
 * @Description  :
 * @Autor        : guoxi
 * @Date         : 2022-06-29 15:17:36
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2022-08-04 15:32:32
 * @FilePath     : \rpms\src\views\project\detail\components\descriptions.vue
-->
<template>
  <div>
    <BasicsInfo
      :projectInfo="info"
      :isBase="isBase"
      :isApplication="isApplication"
    />
    <br />

    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane
        :label="item.title"
        :name="item.index"
        v-for="item in tabs"
        :key="item.title"
      ></el-tab-pane>
      <keep-alive>
        <component :is="tabs[activeNum].step" :projectInfo="info"></component>
      </keep-alive>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";

import BasicsInfo from "./BasicsInfo.vue";
// import Tab1 from "./descTabs/tab1.vue";
// import Tab2 from "./descTabs/tab2.vue";
// import Tab3 from "./descTabs/tab3.vue";
// import Tab4 from "./descTabs/tab4.vue";
// import Tab5 from "./descTabs/tab5.vue";

const activeName = ref("0");
const activeNum = ref(0);

const props = defineProps({
  projectInfo: {
    type: Object
  },
  isBase: {
    type: Boolean,
    default: false
  },
  isApplication: {
    type: Boolean,
    default: false
  }
});

let info = ref({});

const processStatus = new Map([
  [0, "项目成员"],
  [1, "项目合同"],
  [2, "承担单位"],
  [3, "项目经费"],
  [4, "科研成果"],
  [5, "项目目标及考核指标"],
  [6, "项目实施计划"],
  [7, "变更/终止记录"],
  [8, "科创管理人员"]
]);

const tabs = ref([]);

watch(
  () => props.projectInfo,
  newvalue => {
    info.value = newvalue;
  },
  { immediate: false }
);

// 批量导入组件
const modules = import.meta.globEager("./descTabs/*.vue");
const modulesArray = Object.values(modules).map(v => v.default);
console.log(modules,modulesArray, "modulesArraymodulesArray");
modulesArray.forEach((item, index) => {
  tabs.value.push({
    step: item,
    title: processStatus.get(index),
    index: String(index)
  });
});

onMounted(() => {
  info.value = props.projectInfo;
});
// const initJsonParse = list => {
//   const listParse = JSON.parse(list);
//   return listParse
//     .map(item => {
//       return item.underUnitName;
//     })
//     .join(",");
// };

const handleClick = tab => {
  // console.log(tab, event);
  activeNum.value = +tab.index;
};
</script>

<style lang="scss" scoped></style>
